extends inc/main.pug
block variables

block css
	style(type="text/css").
		.top {
			padding-bottom: 0;
		}
		#slider1 {
			width: 100%;
			height: 394px;
			margin: 0 auto 50px auto;
			border: 7px solid rgba(0, 0, 0, .35);
			box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1);
			border-radius: 5px;
		}
		
		#slider2 {
			width: 600px;
			height: 113px;
			margin: auto;
			margin-bottom: 20px;
		}
		#slider2 .slider-slides img {
			width: 100%;
			height: auto;
		}
		#slider2 .navigator span {
			background: none;
		}
		#slider2 .navigator .prev {
			left: -5px;
		}
		#slider2 .navigator .next {
			right: -5px;
		}
		
		/* responsive rules */
		@media (max-width: 713px) {
			#slider1 {
				width: 100%;
				height: auto; /* reset slider height to automatically fix with the first image height. */
				border: none;
				margin-top: 0;
				border-radius: 0;
			}
			#slider2 {
				width: 100%;
				height: 60px;
				margin: 0;
				overflow: hidden;
			}
		}


		
block content
	.top
		#slider1.jSlider
			- var val = 0
			while val < 6
				div: img(src="images/photo"+(val++%6+1)+".jpg" alt="sample photo")
		
		#slider2.jSlider(data-group="3" data-indicator="none" data-navigation="always")
			- var val = 0
			while val < 18
				div: img(src="images/photo"+(val++%6+1)+"_s.jpg" alt="sample photo")
